<template>
    <el-row class="home-box">
      <el-col :sm="18" :xs="24">
        <div class="home-box-left">
          <ArticleCard v-for="(article, index) in articles"
                       :article="article"
                       :key="String(index)">
          </ArticleCard>
          <div class="pagination-box">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalArticle"
                background>
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :sm="6" :xs="0">
        <div class="home-box-right">
          <div class="timer-box">
<!--            <div class="days"></div>-->
            <div class="hours mr-8"></div>
            <div class="clock-dot-box clock-dot-box-left">
              <span class="dot dot-top"></span>
              <span class="dot dot-bottom"></span>
            </div>
            <div class="minutes mr-8"></div>
            <div class="clock-dot-box clock-dot-box-right">
              <span class="dot dot-top"></span>
              <span class="dot dot-bottom"></span>
            </div>
            <div class="seconds"></div>
          </div>
        </div>
      </el-col>
    </el-row>
</template>

<script>
import ArticleCard from "@/components/ArticleCard";
import {listArticle} from "@/api/apis";
import $ from 'jquery';
import '@/assets/js/flipTimer';

export default {
  name: "Home",
  components:{
    ArticleCard,
  },
  data(){
    return{
      articles: [],
      currentPage: 1,
      pageSize: 20,
      totalArticle: 1,
    }
  },
  created(){
    $(document).ready(function() {
      $('.timer-box').flipTimer();
    });
    const page = this.$route.query.page
    const size = this.$route.query.size
    if (page){
      this.currentPage = parseInt(page)
    }
    if(size){
      this.pageSize = parseInt(size)
    }
    this.handleListArticle();
  },
  methods:{
    handleListArticle(){
      let params = new URLSearchParams()
      params.append('page', this.currentPage)
      params.append('size', this.pageSize)
      listArticle(params).then(response => {
        // console.log(response.results.data)
        this.articles = response.results.data
        this.totalArticle = response.count
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(size){
      this.pageSize = size
      if (size > this.totalArticle){
        this.currentPage = 1
      }
      this.$router.push({
        name: 'home',
        query: {
          page: this.currentPage,
          size: this.pageSize,
        }
      })
      this.handleListArticle()
    },
    handleCurrentChange(page){
      this.currentPage = page
      this.$router.push({
        name: 'home',
        query: {
          page: this.currentPage,
          size: this.pageSize,
        }
      })
      this.handleListArticle()
    },
  }
}
</script>

<style scoped>
/*@import "../assets/css/flipTimer.scss";*/
  .home-box{
    margin-top: 20px;
  }
  .home-box-left{
    margin-right: 20px;
    /*background-color: #00feff;*/
  }
  .home-box-right{
    height: 400px;
    /*background-color: #00ff00;*/
    position: fixed;
  }
  @media screen and (max-width: 767px){
    .home-box{
      padding: 0 20px;
    }
  }
  @media screen and (min-width: 768px){
    .home-box{
      padding: 0 100px;
    }
  }
  .pagination-box{
    text-align: center;
    margin: 10px auto;
    background-color: white;
    padding: 10px 0;
  }
  .timer-box{
    /*display: flex;*/
    /*justify-content: space-between;*/
  }
  .mr-8{
    margin-right: 8px;
  }
  .clock-dot-box {
    position: absolute;
    top: 0;
    width: 10px;
    height: 70px;
  }
  .clock-dot-box-left{
    left: 105px;
  }
  .clock-dot-box-right{
    left: 219px;
  }
  .dot {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #454f5b;
    border-radius: 5px;
  }
  .dot-top{
    top: 20px;
  }
  .dot-bottom{
    top: 45px;
  }
</style>
